import { Button, Tooltip, Popconfirm } from "antd";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import style from "./index.css";
import { useAccess, Access } from "@umijs/max";

type Props = {
  text: string;
  textOnClick?: () => void;
  editOnClick: () => void;
  deleteOnClick: () => void;
  display?: "alway" | "hover";
};

export default (props: Props) => {
  const { text, textOnClick, editOnClick, deleteOnClick, display } = props;
  const ac = useAccess();

  return (
    <div className={display === "hover" ? style.OperationBar : ""}>
      {textOnClick ? (
        <Button
          className={style.firstButton}
          color="primary"
          variant="text"
          onClick={textOnClick}
        >
          {text}
        </Button>
      ) : text}
      <Access accessible={ac.canUse("edit")}>
        <Tooltip title="编辑">
          <Button
            type="text"
            color="primary"
            variant="text"
            shape="circle"
            icon={<EditOutlined />}
            onClick={editOnClick}
          />
        </Tooltip>
      </Access>
      <Access accessible={ac.canUse("remove")}>
        <Popconfirm
          title="删除？"
          description="你确定要删除此数据吗？"
          onConfirm={deleteOnClick}
          okText="是"
          cancelText="不"
        >
          <Tooltip title="删除" placement="right">
            <Button
              danger
              type="text"
              shape="circle"
              icon={<DeleteOutlined />}
            />
          </Tooltip>
        </Popconfirm>
      </Access>
    </div>
  );
};
